<template>
	<view class="container">
		<swiper
			:current="tabCurrentIndex"
			class="swiper-box"
			duration="300"
			@change="changeTab"
		>
			<swiper-item
				class="tab-content"
				v-for="(tabItem, tabIndex) in navList"
				:key="tabIndex"
			>
				<scroll-view
					:scroll-top="scrollTop"
					class="list-scroll-content"
					scroll-y
					@scroll="scroll"
					@scrolltolower="loadingMore"
				>
					<!-- 空白页 -->
					<empty
						v-if="
							tabItem.loaded === true && !tabItem.orderList.length
						"
						:src="
							baseTemplateFileUri + 'image/emptyStatus/common.png'
						"
						desc="没有相关订单 ~"
					></empty>

					<!-- 订单列表 -->
					<view
						v-for="(item, index) in tabItem.orderList"
						:key="index"
						class="order-item"
						@click="
							navTo(
								`/pages/order/orderDetail?orderId=${item.order_id}`
							)
						"
					>
						<view class="i-top">
							<text class="time">{{ item.insTime }}</text>
							<text
								:style="themeStyles.textMainColor"
								class="state"
								>{{
									item.status === 1
										? "售后中"
										: item.statusValue
								}}</text
							>
						</view>

						<!-- 商品区域 begin -->
						<view class="goods-list">
							<uni-goods-col
								v-for="(goodsItem,
								goodsIndex) in item.orderGoodsList"
								:key="goodsIndex"
								:goods="goodsItem"
								:routeLink="
									`/pages/integral/pages/order/orderDetail?orderId=${item.orderId}`
								"
								:goodsPrice="goodsItem.priceStr.split('.')"
								:goodsTypeText="goodsItem.skuName"
								:latePrice="goodsItem.priceOut"
							>
								<!-- 主题色 -->
								<view slot="metaRight">
									<view class="goods-item-num"
										>x{{ goodsItem.buyNumber }}</view
									>
								</view>
							</uni-goods-col>
						</view>
						<!-- 商品区域 end -->

						<view class="price-box">
							<text class="num"
								>共{{ item.buyNumberTotal }}件商品 实付款</text
							>
							<view class="cut-price">
								<text class="price">{{
									item.totalFee[0]
								}}</text>
								<text class="decimal">{{
									item.totalFee[1] || "00"
								}}</text>
							</view>
						</view>

						<view v-if="item.status !== 200" class="action-box">
							<button
								v-if="viewBtn(item.status, 1)"
								@click.stop="queryLogistisc(item.logisticsNo)"
								class="action-btn"
							>
								查看物流
							</button>
							<button
								v-if="viewBtn(item.status, 2)"
								@click.stop="nowPay(item.orderId)"
								:style="themeStyles.btnAuxiliaryColor"
								class="action-btn recom"
							>
								立即付款
							</button>
							<button
								v-if="viewBtn(item.status, 4)"
								@click.stop="onDeleteOrder(item.orderId)"
								class="action-btn"
							>
								刪除订单
							</button>
							<button
								v-if="viewBtn(item.status, 3)"
								@click.stop="onConfirmReceipt(item.orderId)"
								:style="themeStyles.btnAuxiliaryColor"
								class="action-btn recom"
							>
								确认收货
							</button>
							<!-- <button v-if="viewBtn(item.status, 4)" @click.stop="nowPay(item.orderId)" class="action-btn recom">再次购买</button> -->
						</view>
					</view>

					<uni-load-more :status="tabItem.loadingType">
					</uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template> 

<script>
import { queryOrderList } from "@/lib/api/orderServer/order";

import { baseFileUri } from "@/utils/request/baseConfig";

import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";

/** components begin */
import empty from "@/components/empty";
import uniGoodsCol from "@/components/goods/uniGoodsCol";

/** components end */

/** mixins begin */
import orderMixin from "@/mixins/order/order";
import payMixin from "@/mixins/pay";
/** mixins end */

let currentPage = 1;

export default {
	mixins: [orderMixin, payMixin],

	components: {
		uniLoadMore,
		uniGoodsCol,
		empty
	},

	data() {
		return {
			scrollTop: 0,
			baseFileUri,
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: "全部",
					loadingType: "more",
					orderList: []
				},
				{
					state: 100,
					text: "待付款",
					loadingType: "more",
					orderList: []
				},
				{
					state: 200,
					text: "待发货",
					loadingType: "more",
					orderList: []
				},
				{
					state: 300,
					text: "待收货",
					loadingType: "more",
					orderList: []
				},

				{
					state: 400,
					text: "已完成",
					loadingType: "more",
					orderList: []
				}
			]
		};
	},

	onLoad(options) {
		currentPage = 1;
		this.tabCurrentIndex = parseInt(options.orderStatus || 0);
	},

	onShow() {
		currentPage = 1;
		this.tabClick(this.tabCurrentIndex);
		this.getOrderList();
	},

	methods: {
		async onCancelOrder(orderId) {
			try {
				await this.cancelOrder(orderId);
				Object.assign(this.$data, this.$options.data());
				this.getOrderList();
			} catch (error) {
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async onConfirmReceipt(orderId) {
			try {
				await this.confirmReceipt(orderId);
				Object.assign(this.$data, this.$options.data());
				this.getOrderList();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async onDeleteOrder(orderId) {
			try {
				await this.deleteOrder(orderId);
				Object.assign(this.$data, this.$options.data());
				this.getOrderList();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async nowPay(orderId) {
			try {
				await this.onPay(orderId);
				this.tabClick(0);
				this.getOrderList();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "支付失败");
			}
		},

		scroll(e) {
			// this.scrollTop = e.detail.scrollTop;
		},

		loadingMore() {
			const index = this.tabCurrentIndex;
			const navItem = this.navList[index];

			if (
				navItem.loadingType === "loading" ||
				navItem.loadingType === "noMore"
			) {
				return;
			}
			currentPage++;
			this.getOrderList();
		},

		/** 处理订单数据 (后期优化至中间服务器) begin */
		parseOrderList(orderList) {
			if (orderList.length) {
				orderList.forEach((item, index) => {
					orderList[index].totalFee = `${item.totalFee}`.split(".");
					orderList[index].orderGoodsList.forEach(
						(goodsItem, goodsIndex) => {
							orderList[index].orderGoodsList[
								goodsIndex
							].price = goodsItem.priceStr.split(".");
						}
					);
				});
			}
			console.log("orderList", orderList);
			return orderList;
		},
		/** 处理订单数据 (后期优化至中间服务器) end */

		// 获取订单列表
		async getOrderList() {
			//这里是将订单挂载到tab列表下
			const index = this.tabCurrentIndex || 0;
			const navItem = this.navList[index];
			const status = navItem.state !== 0 ? navItem.state : "";

			navItem.loadingType = "loading";
			const propsData = {
				status,
				currentPage
			};
			try {
				const res = await queryOrderList(propsData);
				if (currentPage === 1) {
					navItem.orderList = this.parseOrderList(res.data.list);
				} else {
					navItem.orderList = navItem.orderList.concat(
						this.parseOrderList(res.data.list)
					);
				}

				this.$set(navItem, "loaded", true);
				const noMore = navItem.orderList.length >= res.data.total;
				navItem.loadingType = noMore ? "noMore" : "more";
				console.log("navItem.loadingType", navItem.loadingType);
				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				navItem.loadingType = "noMore";
				this.$api.showToast(error.resultInfo || "出错了* _ *");
				this.loaded = true;
				this.$set(navItem, "loaded", true);
			}
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.getOrderList();
			// this.loadData('tabChange');
		},

		//顶部tab点击
		tabClick(index) {
			this.scrollTop = Math.random();
			currentPage = 1;
			this.tabCurrentIndex = index;
		}
	}
};
</script>

<style lang="scss">
@import "@/common/styles/order/orderList.scss";

page,
.container {
	background: $theme-main-bg-color;
	height: 100%;
}

.swiper-box {
	margin-top: 20rpx;
	height: calc(100vh - 88rpx);
}

.list-scroll-content {
	height: 100%;
}

.uni-swiper-item {
	height: auto;
}

/* load-more */
.uni-load-more {
	display: flex;
	flex-direction: row;
	height: 80rpx;
	align-items: center;
	justify-content: center;
}
</style>
